<template>
  <el-form-item v-show="isShow" prop="width" :label="i18nt('designer.setting.widgetWidth')">
    <el-input-number
      v-model="optionModelWidth"
      class="hide-spin-button"
      style="width: 100%"
      :min="0"
      :step="10"
      :max="maxWidth"
      :disabled="disabled"
      @change="onChange"
    ></el-input-number>
  </el-form-item>
</template>

<script>
export default {
  name: 'WidthEditor',
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
    disabled: {
      type: Boolean,
      default: false
    },
    parentWidget: Object
  },
  data() {
    return {
      optionModelWidth: this.optionModel.width
    }
  },
  computed: {
    isShow() {
      // 当组件为staticText, 并且isSetSize为false时，不显示
      if (
        this.selectedWidget &&
        this.selectedWidget.type === 'staticText' &&
        this.optionModel.isSetSize === false
      ) {
        return false
      }

      return true
    },
    maxWidth() {
      const {
        id,
        type,
        size,
        options: { scrollWidth, scrollType, width }
      } = this.parentWidget

      if (id === this.selectedWidget.id) {
        return this.designer.size.width - this.selectedWidget.options.x
      }

      if (type === 'Page') {
        const editWidget = this.designer.editedWidget
        if (
          editWidget &&
          editWidget.type === 'module' &&
          (editWidget.options.scrollType === 2 || editWidget.options.scrollType === 3)
        ) {
          return (
            Math.max(editWidget.options.width, editWidget.options.scrollWidth) -
            this.selectedWidget.options.x
          )
        }
        return size.width - this.selectedWidget.options.x
      }

      if (type === 'module' && (scrollType === 2 || scrollType === 3)) {
        return scrollWidth - this.selectedWidget.options.x
      }
      return width - this.selectedWidget.options.x
    }
  },
  watch: {
    'optionModel.width'(val) {
      this.optionModelWidth = val
    }
  },
  methods: {
    onChange(val) {
      this.optionModel.width = val
    }
  }
}
</script>

<style scoped></style>
